<template>
  <div class="out">
    <div class="playBar">
      <!-- 歌曲图片 -->
      <div class="imageBox" @click="open()" @mousemove="move()">
        <div class="icon" v-if="show"><i :class="icon"></i></div>
        <el-image :src="songImg" fit="fill" lazy />
      </div>

      <!-- 歌曲信息 -->
      <div class="songDesc">
        <div class="songTitle">{{ songTitle }}</div>
        <div class="songArtist">{{ songArtist }}</div>
      </div>
      <!-- 喜欢歌曲的按钮 -->
      <div @click="like()"><i :class="likeText === '喜欢' ? 'el-icon-star-off' : 'el-icon-star-on'"></i>
      </div>
      <!-- 添加收藏 -->
      <div @click="addList()">
        <i class="el-icon-folder-add"></i>
      </div>
      <!-- 播放器 -->
      <!-- 单曲循环时 -->
      <audio :src="nowSong" autoplay class="playMusicAudio" ref="audio" @ended="getNextSong" controls
        id="playMusicAudio" @timeupdate="value" @play="play2()" @pause="pause()"></audio>
      <div class="icon_">
        <!-- 上一首 -->
        <div class="iconfont icon-shangyishou" @click="preSong()"></div>
        <!-- 下一首 -->
        <div class="iconfont icon-xiayishou" @click="nextSong()"></div>
        <!-- 开启随机播放 -->
        <div class="iconfont icon-suijibofang" @click="randomPlay()"
          :style="ifRandomPlay === false ? 'color:#000' : 'color:#ec4141'"></div>
        <!-- 单曲循环 -->
        <div class="iconfont icon-liebiaoxunhuan" @click="roundPlay()"
          :style="ifRound === false ? 'color:#000' : 'color:#ec4141'"></div>

        <div class="iconfont icon-liebiaoshunxu" @click="listRound()"
          :style="ifList === false ? 'color:#000' : 'color:#ec4141'"></div>
      </div>
      <!-- 歌单抽屉 -->
      <div class="el-dropdown" @click="openBox()">
        <span class="el-dropdown-link">
          <div class="el-icon-tickets"></div>
        </span>
      </div>


      <!-- 抽屉 -->
      <div class="box_" v-if="songBox === true">
        <div class="titleBox">
          <div class="title" @click="history()"
            :style="ifNow === true ? 'background-color:#fff' : 'background-color:rgb(236, 65, 65);color:#fff'">历史播放
          </div>
          <div class="title" @click="now()"
            :style="ifNow === true ? 'background-color:rgb(236, 65, 65);color:#fff' : 'background-color:#fff'">
            当前播放</div>
          <div style="margin-left:10px">{{ count }}首</div>
        </div>

        <!-- 抽屉表格 -->
        <el-table :data="allSongs" stripe style="width: 100%" height="250" size="medium"
          :row-class-name="tableRowClassName" :row-style="selectedstyle" @row-dblclick="play">
          <el-table-column width="40">
            <div class="el-icon-video-play"></div>
          </el-table-column>
          <el-table-column prop="name" label="音乐标题"> </el-table-column>
          <el-table-column label="歌手">
            <template slot-scope="scope">
              <div v-if="scope.row.ar !== null">
                {{
                    scope.row.ar.length > 1
                      ? scope.row.ar[0].name + "/" + scope.row.ar[1].name
                      : scope.row.ar[0].name
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="dt" label="时长">
            <template slot-scope="scope">
              <div class="del">
                {{ Math.floor(scope.row.dt / 1000) | timeFormat }}
                <div @click="del(scope)"><i class="el-icon-close"></i></div>
              </div>
            </template>
          </el-table-column>

        </el-table>
      </div>
    </div>

    <div :class="show2 === true ? 'item' : ''">
      <div v-if="show2 === true">
        <Item />
      </div>
    </div>

    <!-- 弹窗 -->
    <el-dialog title="收藏到歌单" :visible.sync="dialogVisible" width="400px" :before-close="handleClose">
      <div v-if="userList !== null">
        <div class="create" @click="create()">
          <div class="createIcon"><i class="el-icon-plus"></i></div>
          <div>新建歌单</div>
        </div>
        <div>

          <div v-for="item in userList.userList" :key="item.id" @click="add(item.id)">
            <div class="create">
              <div class="createIcon">
                <el-image :src="item.coverImgUrl" lazy fit='fill'></el-image>
              </div>

              <div class="desc">
                <div>{{ item.name }}</div>
                <div>{{ item.trackCount }}首</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 新建歌单 -->
    <el-dialog title="新建歌单" :visible.sync="dcreateVisible" width="400px" :before-close="handleCloseTwo">
      <el-form :model="createForm" ref="createFormRef" class="demo-ruleForm">
        <el-form-item label="" prop="title">
          <el-input v-model="createForm.title" size="medium"></el-input>
        </el-form-item>
      </el-form>
      <el-checkbox v-model="checked">是否隐私歌单</el-checkbox>
      <el-button type="danger" @click="confirm()">确定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import debounce from "@/utils/debounce.js";
export default {
  components: {
    Item: () => import('./songItem.vue'),
  },
  computed: {
    ...mapState(['nowPlaySong', 'nowID', 'nowSongCount', 'openItem', 'cookie', 'likeDatas', 'userList', 'songList']),
  },
  mounted() {
    if (
      localStorage.getItem('uid') !== null &&
      localStorage.getItem('cookie') !== null
    ) {
      this.uid = localStorage.getItem('uid');
      this.getCookie = localStorage.getItem('cookie');
      this.likeList();
      this.ifLike()
    }
  },

  watch: {
    nowPlaySong(newVal, oldVal) {
      this.audio = [];
      for (let i = 0; i < this.beforeData.length; i++) {
        if (this.beforeData[i].id === newVal.songId) {
          this.push = false
          break
        } else {
          this.push = true
        }
      }
      if (this.ifNow === true || this.push === true) {
        this.$api.musicItem({ ids: newVal.songId, cookie: localStorage.getItem('cookie') }).then((ret) => {
          ret.songs.map((item, i) => {
            this.beforeData.push(item)
          })
          this.unique()
          this.switch()
        });
      }
      this.audio.push(newVal);
      this.audio.map((item, i) => {
        this.nowSong = item.src;
        this.songImg = item.pic;
        this.songTitle = item.title;
        this.songArtist = item.artist;
        this.id = item.id;
      });
      this.getIndex = this.id;
      if (localStorage.getItem('cookie') !== null) {
        this.likeList();
        this.ifLike()
      }
    },

    // 存入当前播放的歌曲
    nowSongCount(newVal, oldVal) {
      this.nowData = newVal.nowSongCount
      if (this.ifNow === true) {
        this.allSongs = [];
        this.allSongs = this.nowData
      } else {
        this.allSongs = this.beforeData
      }
      this.switch()
      this.count = this.allSongs.length
    },

    // 当前播放歌单的ID
    nowID(newVal, oldVal) {
      this.getAllsong();
    },


    openItem(newVal, oldVal) {
      this.show2 = newVal.openItem;
    },

    cookie(newVal, oldVal) {
      this.uid = localStorage.getItem('uid');
      this.getCookie = newVal.cookie;
      this.likeList();
      this.ifLike()
    },

    likeDatas(newVal, oldVal) {
      this.likeData = newVal.likeDatas
    },

    likeData(newVal, oldVal) {
      this.ifLike()
    },

  },
  data() {
    return {
      allSongs: [],
      audio: [],
      nowSong: '', // 当前播放的歌曲
      songImg:
        'https://s4.music.126.net/style/web2/img/default/default_album.jpg', // 歌曲默认图片
      songTitle: '', // 作者名称
      songArtist: '', // 歌曲名称
      id: null,
      ifOver: false, // 如果这首歌播放完了的话自动播放下一首
      ifRandomPlay: false, // 如果开启了随机播放
      getIndex: '',
      ifRound: false, // 循环播放
      ifList: true,//列表循环
      icon: 'el-icon-arrow-up',
      show: false,
      show2: false,
      loading: false,
      songBox: false,
      likeText: '喜欢',
      likeData: [],
      timer: null,
      uid: '',
      getCookie: '',
      count: 0,
      ifNow: true,
      beforeData: [],
      nowData: [],
      push: false,
      dialogVisible: false,
      dcreateVisible: false,
      createForm: {
        title: '',
      },
      checked: false,
      privacy: '',
    };
  },
  methods: {
    ...mapActions([
      'saveNowSongCount',
      'saveNowSong',
      'savePreSong',
      'ifPause',
      'savePlayTime',
      'saveOpenItem',
      'savelikeData',
      'saveUserList',
      'saveSongList',
    ]),
    // 获取所有歌曲详情
    async getAllsong() {
      this.$api.trackAll({ id: this.nowID.nowID, cookie: this.getCookie }).then((ret) => {
        if (ret.code !== 200) {
          this.$message.error('超时获取失败!!!');
        } else {
          this.saveNowSongCount({ nowSongCount: ret.songs });
        }
      });
    },

    // 播放结束时
    getNextSong(e) {
      // 随机播放开启
      if (this.ifRandomPlay === true) {
        this.getIndex = this.random(0, this.allSongs.length - 1);
        // 单曲循环的时候
      } else if (this.ifRound === true) {
        this.nowSong = ''
      } else if (this.ifList === true && this.nowSongCount.nowSongCount[this.nowSongCount.nowSongCount.length - 1].id === this.nowPlaySong.songId) {
        this.getIndex = 0;
      } else {
        // 普通情况
        if (this.getIndex + 1 === this.allSongs.length) {
          return;
        } else {
          this.getIndex += 1;
        }
      }
      this.play(this.allSongs[this.getIndex]);
    },



    // 切换上一首
    preSong() {
      // 随机播放开启的时候
      if (this.ifRandomPlay === true) {
        this.getIndex = this.random(0, this.allSongs.length - 1);
        // 单曲循环的时候
      } else if (this.getIndex === 0 || this.audio.length === 0) {
        this.$message.error('无法切换!!!');
        return;
      } else {
        this.getIndex -= 1;
      }
      this.play(this.allSongs[this.getIndex]);
    },
    // 切换下一首
    nextSong() {
      // 随机播放开始
      if (this.ifRandomPlay === true) {
        this.getIndex = this.random(0, this.allSongs.length - 1);
      } else if (this.audio.length === 0) {
        this.$message.error('无法切换!!!');
        return;
      } else if (this.getIndex + 1 === this.allSongs.length) {
        this.$message.error('无法切换!!!');
        return;
      } else {
        this.getIndex += 1;
      }
      this.play(this.allSongs[this.getIndex]);
    },

    // 随机播放
    randomPlay() {
      if (this.audio.length === 0) {
        this.$message.error('请先选择歌曲');
      } else {
        this.ifRound = false;
        if (this.ifRandomPlay === false) {
          this.ifRandomPlay = true;
          this.$message({
            message: '已开启随机播放模式',
            type: 'success',
          });
          this.ifRandomPlay = true;
          // this.ifSongList();
        } else {
          this.ifRandomPlay = false;
          this.$message({
            message: '已关闭随机播放模式',
            type: 'success',
          });
        }
      }
    },
    // 单曲循环
    roundPlay() {
      if (this.audio.length === 0) {
        this.$message.error('请先选择歌曲');
      } else {
        this.ifRandomPlay = false;
        if (this.ifRound === false) {
          this.ifRound = true;
          this.$message({
            message: '已打开单曲循环模式',
            type: 'success',
          });
        } else {
          this.ifRound = false;
          this.$message({
            message: '已关闭单曲循环模式',
            type: 'success',
          });
        }
      }
    },

    //列表循环
    listRound() {
      if (this.audio.length === 0) {
        this.$message.error('请先选择歌曲');
      } else {
        if (this.ifList === false) {
          this.ifList = true;
          this.$message({
            message: '已打开列表循环模式',
            type: 'success',
          });
        } else {
          this.ifList = false;
          this.$message({
            message: '已关闭列表循环模式',
            type: 'success',
          });
        }
      }
    },

    // 如果点击了开始按钮
    async play2() {
      await this.ifPause({ pause: true });
    },

    // 播放进度
    async value() {
      await this.savePlayTime({
        playTime: parseInt(
          document.getElementById('playMusicAudio').currentTime,
        ),
      });
    },

    // 如果点击了暂停按钮
    async pause() {
      await this.ifPause({ pause: false });
    },

    // 生成随机数
    random(max, min) {
      return Math.floor(Math.random() * (max - min)) + min;
    },

    // 播放歌曲
    async play(row) {
      const e = localStorage.getItem('cookie');
      if (this.getIndex === undefined) {
        this.getIndex = window.sessionStorage.getItem('getIndex');
      } else {
        this.getIndex = row.row_index;
      }
      const title = row.name;
      const arr = row.ar.map((item) => {
        return item.name;
      });
      const artist = arr.join();
      const pic = row.al.picUrl;
      this.$api.songUrl({ cookie: e, id: row.id }).then((ret) => {
        this.songId = row.id;
        if (ret.data[0].url !== null) {
          this.saveNowSong({
            id: this.getIndex,
            title,
            artist,
            src: ret.data[0].url,
            pic,
            songId: this.songId,
          });
          this.$api.scrobble({ id: this.songId, cookie: e, sourceid: row.al.id, timestamp: this.$utils.timestamp() })
        } else {
          this.$message.error('该歌曲暂时无法播放!!!');
          const index = parseInt(window.sessionStorage.getItem('getIndex')) + 1;
          this.getIndex = index
          this.nextSong()
        }
      });
    },

    tableRowClassName({ row, rowIndex }) {
      row.row_index = rowIndex;
    },

    // 设置行的颜色
    selectedstyle({ row, rowIndex }) {
      if (this.getIndex === rowIndex) {
        return {
          color: '#ec4141',
        };
      }
    },

    // 打开歌曲播放页面
    open: debounce(function () {
      if (this.nowSong !== '' && this.show2 === false) {
        this.saveOpenItem({ openItem: true });
        this.loading = true;
        this.show = true;
        if (this.$route.path === '/mvPlay') {
          document.getElementById('video').pause();
        }

        document.querySelector('.header').style.background = '#808080';
        for (let i = 0; i < document.querySelectorAll('.count').length; i++) {
          document.querySelectorAll('.count')[i].style.zIndex = 0;
        }
        for (let i = 0; i < document.querySelectorAll('.time').length; i++) {
          document.querySelectorAll('.time')[i].style.zIndex = 0;
        }
        this.icon = 'el-icon-arrow-down';
        // 进入歌曲详情页的时候禁用掉滚动条
        document.querySelector('html').style = 'overflow-y:auto';
        this.loading = false;
      } else if (this.nowSong !== '' && this.show2 === true) {
        this.saveOpenItem({ openItem: false });
        this.show = true;
        if (this.$route.path === '/mvPlay') {
          document.getElementById('video').play();
        }
        document.querySelector('.header').style.background = '#ec4141';
        for (let i = 0; i < document.querySelectorAll('.count').length; i++) {
          document.querySelectorAll('.count')[i].style.zIndex = 10;
        }
        for (let i = 0; i < document.querySelectorAll('.time').length; i++) {
          document.querySelectorAll('.time')[i].style.zIndex = 10;
        }
        this.icon = 'el-icon-arrow-up';
      } else {
        this.show = false;
      }
    }, 500),

    // 喜欢歌曲
    like: debounce(function () {
      if (this.audio.length === 0) {
        this.$message.error('请选择歌曲')
      } else if (this.getCookie !== '') {
        if (this.likeText === '已喜欢') {
          this.$api.likeMusic({ id: this.nowPlaySong.songId, like: false, cookie: this.getCookie, timestamp: this.$utils.timestamp() })
        } else {
          this.$api.likeMusic({ id: this.nowPlaySong.songId, like: true, cookie: this.getCookie, timestamp: this.$utils.timestamp() })
        }
        if (this.songList !== null) {
          this.$api.getPlayList({ id: this.songList.songList.id, cookie: this.getCookie, timestamp: this.$utils.timestamp() }).then((ret) => {
            if (ret.code === 200) {
              this.saveSongList({ songList: ret.playlist }); // 获取到的明细存入VUEX
            }
          });
        }
        this.likeList()
      } else {
        this.$message.error('需要登录')
      }
    }, 1000),

    ifLike() {
      if (this.likeData.length !== 0) {
        for (let i = 0; i < this.likeData.length; i++) {
          if (this.nowPlaySong !== null) {
            if (this.likeData[i] === this.nowPlaySong.songId) {
              this.likeText = '已喜欢'
              break
            } else {
              this.likeText = '喜欢'
            }
          }
        }
      }
    },

    // 喜欢登录用户歌曲的列表
    async likeList() {
      this.timer = setTimeout(() => {
        this.likeData = [];
        this.$api
          .likeList({ uid: this.uid, cookie: this.getCookie, timestamp: this.$utils.timestamp() })
          .then((ret) => {
            this.likeData = ret.ids;
            this.savelikeData({ likeDatas: this.likeData })
          });
      }, 500);
    },


    // 历史播放
    history() {
      this.ifNow = false
      this.allSongs = []
      this.allSongs = this.beforeData
      this.switch()
    },

    // 当前播放
    now() {
      this.ifNow = true
      this.allSongs = []
      this.allSongs = this.nowData
      this.switch()
    },

    // 加入歌单
    addList() {
      if (this.getCookie !== '') {
        this.dialogVisible = true
        this.getList()
      } else {
        this.$message.error('需要登录')
      }
    },

    getList() {
      const playlist = []
      this.$api.userPlayList({ uid: this.uid, timestamp: this.$utils.timestamp(), cookie: localStorage.getItem('cookie') }).then((ret) => {
        for (let i = 0; i < ret.playlist.length; i++) {
          if (ret.playlist[i].creator.userId === parseInt(this.uid)) {
            playlist.push(ret.playlist[i])
          } else {
            continue
          }
        }
        this.saveUserList({ userList: playlist })
      })
    },

    // 喜欢登录用户歌曲的列表
    likeList() {
      this.timer = setTimeout(() => {
        this.likeData = [];
        this.$api
          .likeList({ uid: this.uid, cookie: this.getCookie, timestamp: this.$utils.timestamp() })
          .then((ret) => {
            this.likeData = ret.ids;
            this.savelikeData({ likeDatas: this.likeData })
          });
      }, 500);
    },


    // 创建歌单
    create() {
      this.dcreateVisible = true
      this.createForm.title = this.songTitle
    },

    // 确认创建
    confirm() {
      this.$refs.createFormRef.validate(async (e) => {
        if (!e) return;
        if (this.checked === true) {
          this.privacy = 10
        }
        this.$api.createList({ name: this.createForm.title, cookie: this.getCookie, timestamp: this.$utils.timestamp(), privacy: this.privacy })
          .then((ret) => {
            if (ret.code === 200) {
              if (this.nowPlaySong !== null) {
                this.$api.addList({ op: 'add', pid: ret.id, tracks: this.audio[0].songId, cookie: this.getCookie, timestamp: this.$utils.timestamp() })
                  .then((res) => {
                    if (res.status === 200) {
                      this.$message({
                        message: '操作成功',
                        type: 'success',
                      });
                    }
                  })
                this.getList()
              }
              this.dcreateVisible = false
            }
          })
      });
    },

    // 添加歌曲
    add(e) {
      this.$api.addList({ op: 'add', pid: e, tracks: this.audio[0].songId, cookie: this.getCookie, timestamp: this.$utils.timestamp() })
        .then((res) => {
          if (res.status === 200) {
            this.$message({
              message: '操作成功',
              type: 'success',
            });
          }
        })
      this.getList()
      this.dialogVisible = false
    },

    handleCloseTwo() {
      this.dcreateVisible = false
    },


    handleClose() {
      this.dialogVisible = false
    },

    switch() {
      this.count = 0
      if (this.allSongs !== []) {
        this.getIndex = ''
        this.count = this.allSongs.length
        for (let i = 0; i < this.allSongs.length; i++) {
          if (this.nowPlaySong !== null) {
            if (this.allSongs[i].id === this.nowPlaySong.songId) {
              this.getIndex = i
              break
            }
          }
        }
      }
    },

    move() {
      if (this.nowSong !== '' && this.show2 === false) {
        this.show = true;
        this.icon = 'el-icon-arrow-up';
      } else if (this.show2 === true) {
        this.show = true;
        this.icon = 'el-icon-arrow-down';
      } else {
        this.show = false;
      }
    },

    openBox() {
      if (this.songBox === true) {
        this.songBox = false;
      } else {
        this.songBox = true;
      }
    },

    unique() {
      const hash = {};
      this.beforeData = this.beforeData.reduce((preVal, curVal) => {
        hash[curVal.id] ? '' : hash[curVal.id] = true && preVal.push(curVal);
        return preVal
      }, [])
    },

    // 从播放列表删除
    del(e) {
      if (this.ifNow === true) {
        this.nowSongCount.nowSongCount.splice(e.$index, 1)
        this.saveNowSongCount({ nowSongCount: this.nowSongCount.nowSongCount })
      } else {
        this.beforeData.splice(e.$index, 1)
        this.count = this.beforeData.length
      }
    },
  },
};
</script>

<style scoped>
.playBar {
  display: flex !important;
  height: 60px;
  align-items: center;
  z-index: 50;
  position: fixed;
  background: #f0f3f4;
  box-shadow: 5px 5px 5px 5px rgba(87, 75, 75, 0.2);
  width: 100%;
  bottom: 0;
}

.el-image {
  display: flex;
  width: 60px;
  height: 100%;
  margin-right: 20px;
}

.imageBox:hover .icon {
  display: flex;
}


.icon-liebiaoxunhuan,
.icon-xiayishou,
.icon-suijibofang,
.icon-shangyishou,
.icon-liebiaoshunxu {
  font-size: 20px;
}

.icon_ {
  display: flex;
}

.icon_ div {
  margin-right: 10px;
}

.el-icon-back {
  margin-right: 20px;
}

.el-icon-picture-outline-round {
  margin-left: 20px;
  margin-right: 20px;
}

.playMusicAudio {
  width: 600px;
}

.songDesc {
  width: 100px;
  font-size: 15px;
  text-align: left;
}

.songTitle,
.songArtist {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.songArtist {
  margin-top: 5px;
}

.el-icon-tickets {
  font-size: 60px;
  color: #ec4141;
}

.el-dropdown {
  position: absolute;
  right: 0;
}

.title {
  padding: 5px 10px;
  font-size: 20px;
  border: 1px solid #fafafa;
  border-radius: 15px;
  cursor: pointer;
  margin-right: 10px;
}

.count {
  font-size: 15px;
  color: gray;
  padding-left: 15px;
}

.imageBox {
  position: relative;
}

.icon {
  position: absolute;
  font-size: 24px;
  z-index: 10;
  font-weight: 700;
  display: none;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 100%;
  color: #f0f3f4;
  background: rgba(0, 0, 0, 0.5);
}

.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

.el-icon-loading {
  position: fixed;
  font-size: 50px;
  left: 50%;
  top: 50%;
  color: #ec4141;
}

.item {
  width: 100%;
  position: absolute;
  top: 60px;
  animation: open .5s linear;
}


@keyframes open {
  from {
    top: -300px
  }

  to {
    top: 60px
  }
}


.box_ {
  width: 400px;
  position: absolute;
  bottom: 60px;
  right: 0;
  background: #fff;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  box-shadow: -3px -4px 5px 5px rgb(87 75 75 / 20%);
}

.el-icon-star-off,
.el-icon-star-on,
.el-icon-folder-add {
  font-size: 24px;
  margin-right: 10px;
}

.titleBox {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  align-items: center;
}


.create {
  display: flex;
  font-size: 20px;
  align-items: center;
  cursor: pointer;
  margin-bottom: 15px;
}

.createIcon {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  display: flex;
  background: #fafafa;
  color: #ec4141;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.createIcon .el-image {
  width: 40px;
  height: 40px;
  margin-right: 0;
}


.desc div:nth-child(2) {
  font-size: 15px;
}

.el-button {
  width: 100%;
}

.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}

.el-button {
  margin-top: 10px;
}

.del {
  display: flex;
}

.del div {
  margin-left: 20px;
}
</style>
